<template>
  <page-container title="修改密码">
    <el-form
      ref="form"
      :model="form"
      label-width="120px"
      class="password-form"
      :rules="rules">
      <el-form-item label="原密码" prop="oldPassword">
        <el-input
          v-model="form.oldPassword"
          type="password"
          show-password
          placeholder="请输入原密码"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input
          v-model="form.newPassword"
          type="password"
          show-password
          placeholder="请输入新密码"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input
          v-model="form.confirmPassword"
          type="password"
          show-password
          placeholder="请确认新密码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交修改</el-button>
      </el-form-item>
    </el-form>
  </page-container>
</template>

<script>
import PageContainer from '@/components/PageContainer.vue'
import { login } from '@/api/user'
export default {
  components: { PageContainer },
  name: 'UserPassword',

  data () {
    const validatePass = (rule, value, callback) => {
      if (value !== this.form.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      form: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      rules: {
        oldPassword: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    async getUserInfo () {
      const res = await login()
      if (res.code === 200) {
        this.form.oldPassword = res.data.oldPassword
      }
    },
    submitForm () {
      this.$refs.form.validate(valid => {
        if (valid) {
          // 提交修改密码逻辑
        }
      })
    }
  }
}
</script>

<style scoped>
.password-container {
  background-color: #f5f7f9;
  padding: 24px;
  min-height: calc(100vh - 64px);
}

.password-form {
  background: white;
  padding: 24px;
  border-radius: 8px;
  max-width: 600px;
}

.el-input {
  width: 300px;
}
</style>
